<template>
  <el-row class="uav-list" :gutter="16">
    <el-col :span="18">
      <div class="f-c" style="height: 100%">
        <div class="card f-r a-c">
          <div class="f-r a-c">
            <span>项目筛选：</span>
            <el-form>
              <e-form-item>
                <el-select v-model="searchParams.model" style="width: 120px">
                  <el-option v-for="item in modelList" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </e-form-item>
              <e-form-item style="margin-left: 16px;margin-right: 16px">
                <el-select v-model="searchParams.task" style="width: 120px">
                  <el-option v-for="item in taskList" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </e-form-item>
              <e-form-item>
                <el-select v-model="searchParams.status" style="width: 120px">
                  <el-option v-for="item in statusList" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </e-form-item>
            </el-form>
          </div>
          <div class="f-g"></div>
          <div class="f-s f-r a-c">
            <el-input placeholder="输入关键词进行搜索" style="max-width: 180px" v-model="searchParams.keyword" :prefix-icon="Search"></el-input>
            <el-button style="margin-left: 16px" type="primary" :icon="Plus" @click="openAdd">新增项目</el-button>
          </div>
        </div>
        <div class="f-g list-content">
          <el-scrollbar>
            <el-row :gutter="16">
              <div style="padding: 0 8px 0 8px;width: 255px;" v-for="item in uavList" :key="item.id">
                <div class="uav-item" @click="toDetail(item)">
                  <div class="del-icon">
                    <el-icon size="16" color="#fff"><Delete /></el-icon>
                  </div>
                  <div class="status" v-if="item.statusName">
                    {{ item.statusName }}
                  </div>
                  <img src="@/assets/uav2.png" alt="">
                  <div class="uav-content">
                    <div class="name">{{ item.name }}</div>
                    <div class="desc">
                      机型: {{ item.airport }} |
                      所属飞手: {{ item.pilot }}
                    </div>
                    <div class="create-time">
                      {{ item.createTime }}
                    </div>
                  </div>
                </div>
              </div>
            </el-row>
          </el-scrollbar>
        </div>
        <el-pagination
            class="f-r a-c j-c"
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[10, 50, 100, 200]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="changeSize"
            @current-change="changePage"
        />
      </div>
    </el-col>
    <el-col :span="6">
      <div class="card f-c" style="height: 100%">
        <div class="title">储存空间</div>
        <div class="storage">
          <div class="f-r a-c f-e">
            {{ storageInfo.used }}GB可用，共{{ storageInfo.total}}GB
          </div>
          <el-progress :stroke-width="12" :percentage="50" :show-text="false"/>
        </div>
        <div class="title" style="margin-top: 50px;margin-bottom: 20px">机场信息</div>

        <div class="fly-record">
          <div class="fly-record-item">
            <div class="record-item-name">
              <span>执飞记录</span>
              <span class="tag">{{ flyRecord.flyRecord }}</span>
            </div>
            <div class="more" @click="toFlyRecord">查看详情 > </div>
          </div>
          <div class="fly-record-item">
            <div class="record-item-name">
              <span>执飞日志</span>
              <span class="tag">{{ flyRecord.flyLog }}</span>
            </div>
            <div class="more" @click="toFlyLog">查看详情 > </div>
          </div>
        </div>

        <div class="title" style="margin-top: 20px">正在执飞/离线机场数</div>

        <div class="airportProjectMap f-g">
          <div class="box f-r a-c j-b">
            <div>
              执飞中：{{ flyRecord.flyOnline }} 丨 离线中：<span class="error">{{ flyRecord.flyOffline }}</span>
            </div>
            <div class="f-r a-c" style="margin-left: 20px">
              <div class="refresh-icon all1" @click="layout1"></div>
              <div class="refresh-icon all2"  @click="layout2"></div>
              <div class="refresh-icon all"  @click="layout3"></div>
            </div>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
  <el-dialog
      v-model="dialogVisible"
      title="新增项目"
      width="400"
  >
    <el-form class="custom-form" label-width="200px" :model="formData" :rules="formRules" label-position="left">
      <el-form-item label="项目类型：" >
        <el-select v-model="formData.category" >
          <el-option v-for="item in categoryList" :value="item.id" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目名称：">
        <el-input v-model="formData.name" placeholder="请输入项目名称"></el-input>
      </el-form-item>
      <el-form-item label="机型：">
        <el-input v-model="formData.model" placeholder="请输入机型"></el-input>
      </el-form-item>
      <el-form-item label="sn码：">
        <el-input v-model="formData.sn" placeholder="请输入sn码"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer f-r a-c j-c">
        <el-button type="primary" @click="confirmAdd">
          确认增加
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import {ref} from "vue";
import { Search, Plus, Delete } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
// 机型列表
const modelList = ref([
  {
    id: 1,
    name: '机场1'
  },
  {
    id: 2,
    name: '机场2'
  },
  {
    id: 3,
    name: '机场3'
  }
]);
// 飞行状态
const statusList = ref([
  {
    id: 1,
    name: '未开始'
  },
  {
    id: 2,
    name: '进行中'
  },
  {
    id: 3,
    name: '已完成'
  }
]);
// 任务
const taskList = ref([
  {
    id: 1,
    name: '航线规划'
  },
  {
    id: 2,
    name: '飞行'
  },
  {
    id: 3,
    name: '数据处理'
  }
]);
const searchParams = ref({
  model: '',
  task: '',
  status: ''
})

// 机场列表
const uavList = ref([
  {
    id: 1,
    name: '机场1',
    airport: '机场1',
    pilot: '张三',
    createTime: '2021-10-10',
    statusName: '执飞中'
  },
  {
    id: 2,
    name: '机场2',
    airport: '机场1',
    pilot: '李四',
    createTime: '2021-10-10'
  },
  {
    id: 3,
    name: '机场3',
    airport: '机场1',
    pilot: '王五',
    createTime: '2021-10-10'
  },
  {
    id: 4,
    name: '机场3',
    airport: '机场1',
    pilot: '王五',
    createTime: '2021-10-10'
  },
  {
    id: 5,
    name: '机场3',
    airport: '机场1',
    pilot: '王五',
    createTime: '2021-10-10'
  }
])

const search = () => {
}
const pageNo = ref(1)
const pageSize = ref(10)
const total = ref(0)
const changePage = (val) => {
  pageNo.value = val
  search()
}
const changeSize = (val) => {
  pageSize.value = val
  search()
}

// 机场信息
// 储存空间信息
const storageInfo = ref({
  total: 326,
  used: 50
})
// 飞行情况
const flyRecord = ref({
  flyRecord: 10,
  flyLog: 20,
  flyOnline: 30,
  flyOffline: 40
})

/**
 * 新增项目
 */
const dialogVisible = ref(false)
const formData = ref({
  category: '',
  name: '',
  model: '',
  sn: ''
})
const formRules = ref({})
const categoryList = ref([
  {
    id: 1,
    name: '机场项目'
  },
])
const openAdd = () => {
  console.log('新增项目')
  dialogVisible.value = true
}
const confirmAdd = () => {
  console.log('确认新增')
  dialogVisible.value = false
}

const toDetail = (item) => {
  router.push({
    path: '/airportProject/detail',
    query: {
      id: item.id
    }
  })
}
/**
 * 查看执飞记录
 */
const toFlyRecord = () => {
  router.push({
    path: '/flyRecord'
  })
}
const toFlyLog = () => {
}

/**
 * 跳转监控
 */
const layout1 = () => {
  console.log('layout1')
  router.push({
    path: '/monitor',
    query: {
      layout: 1
    }
  })
}
const layout2 = () => {
  console.log('layout2')
  router.push({
    path: '/monitor',
    query: {
      layout: 2
    }
  })
}
const layout3 = () => {
  console.log('layout3')
  router.push({
    path: '/monitor',
    query: {
      layout: 3
    }
  })
}
</script>

<style lang="scss">
.custom-form {
  .el-form-item {
    background: rgba(243,243,243,0);
    border-radius: 8px;
    border: 1px solid #F3F3F3;
    padding: 4px 20px;
    .el-form-item__label {
      color: #898F9D;
    }
    .el-input__wrapper,
    .el-select__wrapper {
      box-shadow: none;
    }
  }
}
.uav-list {
  height: 100%;
  padding: 16px;
  overflow: auto;
  .list-content {
    .el-scrollbar {
      .el-scrollbar__bar.is-horizontal  {
        display: none !important;
      }
    }
  }
  .card {
    padding: 12px 12px;
    border-radius: 4px;
    background-color: #FFFFFF;
    .title {
      font-family: PingFang SC;
      font-size: 14px;
      color: #1A1A1A;
      line-height: 20px;
      font-weight: 500;
    }
  }
  .uav-item {
    margin-top: 16px;
    border-radius: 10px;
    background-color: #FFFFFF;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    .del-icon {
      position: absolute;
      left: 10px;
      top: 10px;
      cursor: pointer;
      z-index: 9;
    }
    .status {
      position: absolute;
      right: 0;
      top: 0;
      width: 92px;
      height: 38px;
      background: rgba(0,0,0,0.1);
      border-radius: 0px 8px 0px 26px;
      line-height: 38px;
      text-align: center;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #FFFFFF;
    }
    img {
      width: 100%;
      height: 168px;
      border-radius: 10px;
    }
    .uav-content {
      padding: 16px;
      .name {
        font-family: PingFang SC;
        font-size: 14px;
        color: #1A1A1A;
        line-height: 20px;
        margin-bottom: 12px;
      }
      .desc {
        font-family: PingFang SC;
        font-size: 14px;
        color: #666666;
        line-height: 24px;
        margin-bottom: 10px;
      }
      .create-time {
        font-family: PingFang SC;
        font-size: 14px;
        color: #898F9D;
        line-height: 14px;
      }
    }
  }
  .storage {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #666666;
    line-height: 34px;
  }
  .fly-record {
    .fly-record-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 55px;
      .record-item-name {
        font-family: PingFang SC;
        font-size: 14px;
        color: #1A1A1A;
        line-height: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 400;
        .tag {
          font-family: PingFang SC;
          font-size: 14px;
          line-height: 12px;
          background: #FF6935;
          border-radius: 9px;
          padding: 4px 6px;
          margin-left: 8px;
          color: #FFFFFF;
        }
      }
      .more {
        cursor: pointer;
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 19.6px;
        text-align: left;
        color: #898F9D;
      }
    }
  }
  .airportProjectMap {
    position: relative;
    margin-top: 30px;
    width: 100%;
    border-radius: 10px;
    background-color: #E5F1FD;
    .box {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 46px;
      background: rgba(0,0,0,0.3);
      border-radius: 0px 0px 10px 10px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #FFFFFF;
      padding: 0 16px;
    }
  }
}
</style>